<template>
	<div>
		<el-row>
			<el-col :span="24">
				<el-card class="card-image" :style="`background-image: url('/images/经营看板.png');`" shadow="hover">
				</el-card>
			</el-col>
		</el-row>
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="6">
				<el-card shadow="hover">
					<div class="top">
						<el-text>
							本年已签约
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								197.8万元
							</template>
							<el-text>
								197.8万元
							</el-text>
						</el-tooltip>
					</div>
					<div class="image">
						<el-image src="/images/j1.png"></el-image>
					</div>
					<div class="bottom">
						<el-text>
							环比增长率 -87.5%
							<el-icon :size="12" color="#67C23A">
								<CaretBottom />
							</el-icon>
						</el-text>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="hover">
					<div class="top">
						<el-text>
							本年已回款
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								274000元
							</template>
							<el-text>
								274000元
							</el-text>
						</el-tooltip>
					</div>
					<div class="image">
						<el-image src="/images/j2.png"></el-image>
					</div>
					<div class="bottom">
						<el-text>
							环比增长率 0%
							<!-- 						<el-icon :size="12" color="#67C23A">
								<CaretBottom />
							</el-icon> -->
						</el-text>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="hover">
					<div class="top">
						<el-text>
							本年新增成交客户
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								2家
							</template>
							<el-text>
								2家
							</el-text>
						</el-tooltip>
					</div>
					<div class="image">
						<el-image src="/images/j3.png"></el-image>
					</div>
					<div class="bottom">
						<el-text>
							环比增长率 -85.7143%
							<el-icon :size="12" color="#67C23A">
								<CaretBottom />
							</el-icon>
						</el-text>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="hover">
					<div class="top">
						<el-text>
							成交客户总量
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								16家
							</template>
							<el-text>
								16家
							</el-text>
						</el-tooltip>
					</div>
					<div class="bottom">
						<el-text></el-text>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover" class="my">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									订单利润报表
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<el-table :data="ordersData" style="width: 100%" class="my">
						<el-table-column prop="month" label="签约日期" />
						<el-table-column prop="amount" />
						<el-table-column prop="goods" label="产品成本" />
						<el-table-column prop="totalProfit" label="毛利率" />
						<el-table-column prop="profitMargin" label="综合毛利率" />
					</el-table>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover" class="my">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									采购订单报表
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<el-table :data="purchaseData" style="width: 100%" class="my">
						<el-table-column prop="month" label="采购下单月" />
						<el-table-column prop="orderCount" label="采购下单数" />
						<el-table-column prop="quantity" label="采购总量" />
						<el-table-column prop="amount" label="采购总金额" />
					</el-table>
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card style="height: 104px;" shadow="hover">
					<div class="top">
						<el-text>
							销售应收总额
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								{{orderAmount}}元
							</template>
							<el-text>
								{{orderAmount}}元
							</el-text>
						</el-tooltip>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: 104px;" shadow="hover">
					<div class="top">
						<el-text>
							采购应付总额
						</el-text>
					</div>
					<div class="body">
						<el-tooltip placement="top">
							<template #content>
								{{pendAmount}}元
							</template>
							<el-text>
								{{pendAmount}}元
							</el-text>
						</el-tooltip>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover" class="my">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									销售回款
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<el-table :data="receiptCountData" style="width: 100%" class="my">
						<el-table-column prop="month" label="收款月" />
						<el-table-column prop="amount" label="核销金额" />
					</el-table>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card style="height: auto;" shadow="hover" class="my">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									销售退款支出
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<el-table :data="salesReturnCountData" style="width: 100%" class="my">
						<el-table-column prop="month" label="核销日期（月）" />
						<el-table-column prop="amount" label="退款金额" />
					</el-table>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card style="height: auto;" shadow="hover" class="my">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									采购支出
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<el-table :data="paymentCountData" style="width: 100%" class="my">
						<el-table-column prop="month" label="付款日期（月）" />
						<el-table-column prop="amount" label="付款金额" />
					</el-table>
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									签约趋势分析
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart1" style="height: 276px;"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									回款趋势分析
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart2" style="height: 276px;"></div>
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									产品-销售排行
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart3" style="height: 400px;"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: auto;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									客户-销售排行
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart4" style="height: 400px;"></div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { CaretBottom, Position, MoreFilled } from '@element-plus/icons-vue';
	import * as echarts from 'echarts';
	import request from '../../utils/request';
	import { convertMonth } from '../../utils/date';
	import { formatNumber } from '../../utils/index';
	//
	const purchaseData = ref([]);
	const ordersData = ref([]);
	const orderAmount = ref(0);
	const pendAmount = ref(0);
	const receiptCountData = ref([]);
	const salesReturnCountData = ref([]);
	const paymentCountData = ref([]);
	const echart1 = ref();
	const echart2 = ref();
	const echart3 = ref();
	const echart4 = ref();
	const echartOption1 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			bottom: 0,
			data: ['订单总额(求和)']
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['2022年02月', '2022年03月', '2022年04月', '2022年05月', '2022年06月', '2022年07月', '2022年08月']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '订单总额(求和)',
				data: [4.3, 12.3, 908.6, 309.8, 208.9, 20.9, 30.9],
				type: 'line',
				color: '#5eaa7d',
				areaStyle: {
					color: '#ebf4ef'
				},
				emphasis: {
					focus: 'series'
				},
				label: {
					show: true,
					position: 'top'
				},
			}
		]
	};
	const echartOption2 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			bottom: 0,
			data: ['核销金额(求和)']
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['2022年02月', '2022年03月', '2022年04月', '2022年05月', '2022年06月', '2022年07月', '2022年08月']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '核销金额(求和)',
				data: [4.3, 12.3, 908.6, 309.8, 208.9, 20.9, 30.9],
				type: 'line',
				color: '#5eaa7d',
				areaStyle: {
					color: '#ebf4ef'
				},
				emphasis: {
					focus: 'series'
				},
				label: {
					show: true,
					position: 'top'
				},
			}
		]
	};
	const echartOption3 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		dataset: {
			source: [
				[522.8, 'BELL贝尔温3*5米|在库734件', 'BELL贝尔温3*5米|在库734件'],
				[456.8, 'naturehike挪客3*4米|在库889件', 'naturehike挪客3*4米|在库889件'],
				[212.4, '克米特椅中号│在库692件', '克米特椅中号│在库692件'],
				[142.1, '克米特椅大号│在库681件', '克米特椅大号│在库681件'],
				[140.3, '松木蛋卷桌大号1.2m|在库543件', '松木蛋卷桌大号1.2m|在库543件'],
				[312.8, '铝合金蛋卷桌大号1.2m |在库508盒', '铝合金蛋卷桌大号1.2m |在库508盒']
			]
		},
		grid: { containLabel: true },
		xAxis: { name: '' },
		legend: {
			bottom: 0,
			data: ['订单总额']
		},
		yAxis: { type: 'category' },
		series: [
			{
				name: '订单总额',
				type: 'bar',
				color: '#88aafa',
				areaStyle: {
					color: '#ebf4ef'
				},
				label: {
					show: true,
					position: 'right',
					color: '#88aafa'
				},
				encode: {
					// Map the "amount" column to X axis.
					x: 'amount',
					// Map the "product" column to Y axis
					y: 'product'
				}
			}
		]
	};
	const echartOption4 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		dataset: {
			source: [
				[6.8, '海纳物流科技有限公司', '海纳物流科技有限公司'],
				[15.8, '创想教育科技有限公司', '创想教育科技有限公司'],
				[15.8, '大禹文化传媒有限公司', '大禹文化传媒有限公司'],
				[19, '酷酷酷', '酷酷酷'],
				[28.4, '绿色家居装饰有限公司', '绿色家居装饰有限公司'],
				[28.5, '艾默生电器有限公司', '艾默生电器有限公司'],
				[42.3, '飞跃广告传媒有限公司', '飞跃广告传媒有限公司'],
				[48.8, '泛海国际公司', '泛海国际公司'],
				[68.2, '星际科技有限公司', '星际科技有限公司'],
				[110.8, '卓中商务', '卓中商务'],
				[167.2, '宜居生态园林有限公司', '宜居生态园林有限公司'],
				[168.4, '泛海国际', '泛海国际'],
				[186.7, '精英人才服务有限公司', '精英人才服务有限公司'],
				[208.7, '融创房地产开发有限公司', '融创房地产开发有限公司'],
				[674.3, '事驰科技', '事驰科技'],
			]
		},
		grid: { containLabel: true },
		xAxis: { name: '' },
		legend: {
			bottom: 0,
			data: ['订单总额(求和)']
		},
		yAxis: { type: 'category' },
		series: [
			{
				name: '订单总额(求和)',
				type: 'bar',
				color: '#88aafa',
				areaStyle: {
					color: '#ebf4ef'
				},
				label: {
					show: true,
					position: 'right',
					color: '#88aafa'
				},
				encode: {
					// Map the "amount" column to X axis.
					x: 'amount',
					// Map the "product" column to Y axis
					y: 'product'
				}
			}
		]
	};
	//
	onMounted(() => {
		initEchart();
		purchaseOrder();
		salesOrderCount();
		salesOrderAmount();
		pendingAmount();
		receiptCount();
		salesReturnCount();
		paymentCount();
	});

	//
	const initEchart = () => {
		// 基于准备好的dom，初始化echarts实例
		var myChart1 = echarts.init(echart1.value);
		var myChart2 = echarts.init(echart2.value);
		var myChart3 = echarts.init(echart3.value);
		var myChart4 = echarts.init(echart4.value);
		// 绘制图表
		myChart1.setOption(echartOption1);
		myChart2.setOption(echartOption2);
		myChart3.setOption(echartOption3);
		myChart4.setOption(echartOption4);
	}
	/**
	 * 采购订单
	 */
	const purchaseOrder = async () => {
		const result = await request({
			url: '/login/selectCount'
		});
		purchaseData.value = result.data.t;
		//
		purchaseData.value.forEach((item) => {
			item.month = convertMonth(item.month);
		})
		console.log('purchaseOrder--->', result);
	}
	/**
	 * 订单利润报表/签约趋势分析
	*/
	const salesOrderCount = async () => {
		const result = await request({
			url: '/login/selectSalesOrderCount'
		});
		ordersData.value = result.data.t;
		//
		ordersData.value.forEach((item) => {
			item.month = convertMonth(item.month);
			item.profitMargin = Number(item.profitMargin).toFixed(1) + '%';
		})
		console.log('salesOrderCount--->', result);
	}
	/**
	 * 统计待收款金额
	 */
	const salesOrderAmount = async () => {
		const result = await request({
			url: '/login/selectSalesOrderAmount'
		});
		orderAmount.value = formatNumberToTenThousand(result.data.t) + '万';
		console.log('selectSalesOrderAmount--->', result);
	}

	/**
	 * 统计应付总额
	 */
	const pendingAmount = async () => {
		const result = await request({
			url: '/login/selectPendingAmount'
		});
		pendAmount.value = formatNumberToTenThousand(result.data.t) + '万';
		console.log('selectPendingAmount--->', result);
	}
	/**
	 * 销售回款总金额/回款趋势分析
	 */
	const receiptCount = async () => {
		const result = await request({
			url: '/login/selectReceiptCount'
		});
		receiptCountData.value = result.data.t;
		receiptCountData.value.forEach((item) => {
			item.amount = item.amount + '元';
		})
		console.log('selectReceiptCount--->', result);
	}
	/**
	 * 销售退款支出
	 */
	const salesReturnCount = async () => {
		const result = await request({
			url: '/login/selectSalesReturnCount'
		});
		salesReturnCountData.value = result.data.t;
		salesReturnCountData.value.forEach((item) => {
			item.amount = item.amount + '元';
		})
		console.log('selectSalesReturnCount--->', result);
	}
	/**
	 * 采购支出
	 */
	const paymentCount = async () => {
		const result = await request({
			url: '/login/selectPaymentCount'
		});
		paymentCountData.value = result.data.t;
		paymentCountData.value.forEach((item) => {
			item.amount = item.amount + '元';
		})
		console.log('selectPaymentCount--->', result);
	}
	function formatNumberToTenThousand(number : number) {
		// 将数字除以 10000，得到以万为单位的数值
		const numberInTenThousand = number / 10000;

		// 可以选择保留一定的小数位数，比如保留两位小数
		const formattedNumber = numberInTenThousand.toFixed(2);

		return formattedNumber;
	}
</script>
<style>
	@import '../../assets/css/index.css';
</style>
<style scoped lang="scss">
	@import '../../assets/css/index.scss';
</style>